<template>
  <div>
    <a-layout>
      <a-layout-header style="background: #fff; padding-left: 24px;">
        <!-- <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="toggle"
        /> -->
        <a-button type="primary" icon="plus" :style="{backgroundColor:'#009688'}" ghost>
          添加
        </a-button>
        <a-button style="" type="danger" icon="rest" ghost>
          删除
        </a-button>
        <a-button style="" type="primary" icon="redo" :loading="loading" ghost @click="refreshContent">
          刷新
        </a-button>
      </a-layout-header>
    </a-layout>
    <a-table :columns="columns"
              :data-source="data"
             :loading="loading"
             :pagination="false"
             :scroll="scrolls"
            >
      <a slot="action" slot-scope="text">action</a>
    </a-table>
  </div>

</template>


<script>
const columns = [
  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const datas = [];
for (let i = 5; i < 100; i++) {
  datas.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

export default {
  name: 'Home',
  data() {
    return {
      data,
      columns,
      loading: false,
      scrolls:{ x: 1500, y: 'calc(100vh - 24px - 8px - 48px - 250px)',scrollToFirstRowOnChange : true},
    };
  },
  methods: {
    toBPage(){
      this.$bus.emit('bPage', this.data);
    },
    refreshContent(){
      // location.reload()
      this.loading = true;
      this.data = datas;
      this.loading = false;
    }
  },
  created:function (){
    this.toBPage();
  }
}
</script>

<style scoped>
   ::-webkit-scrollbar
{
    width: 15px;
    height:32px;
}
/* table tbody::-webkit-scrollbar:hover{
    width: 20px;
    height:20px;
} */

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(36, 35, 35, 0.1);
    background-color: rgba(18, 18, 19, 0.1);
}
</style>
